<template>
  <a-modal
    :open="visible"
    :after-close="reset"
    width="1468px"
    centered
    :footer="null"
    :body-style="{ padding: 0 }"
    @update:open="bool => (visible = bool)"
  >
    <div class="model-body">
      <div class="image-wrap">
        <div v-if="detail?.imgPath" class="big-img-wrap">
          <div class="under-bg-img" :style="{ backgroundImage: `url(${detail?.imgPath})` }"></div>
          <img class="big-img" :src="detail?.imgPath" alt="" />
        </div>
      </div>

      <div class="info-wrap">
        <div class="title-wrap">图片详情</div>

        <div class="info-body my-scrollbar">
          <template v-if="detailInfo">
            <info-module v-if="modelList.length" class="w-[100%]" label="模型">
              <div class="model-list">
                <g-model-line v-for="item in modelList" :key="item?.cn" class="mt-10" :model="item" />
              </div>
            </info-module>
            <info-module class="w-[100%]" label="提示词" :value="detailInfo?.prompt" has-copy :elliptical="999" />
            <info-module class="w-[100%]" label="负向提示词" :value="detailInfo?.negativePrompt" has-copy :elliptical="999" />
            <info-module class="w-[47%]" label="模型的VAE" :value="detailInfo?.overrideSettings?.sdVae" />
            <info-module class="w-[47%]" label="CLIP 终止层数" :value="detailInfo?.overrideSettings?.clipStopAtLastLayers" />
            <info-module class="w-[47%]" label="图片大小" :value="`${detailInfo?.width || 0}x${detailInfo?.height || 0}`" />
            <info-module class="w-[47%]" label="采样器" :value="detailInfo?.samplerName" />
            <info-module class="w-[47%]" label="调度类型" :value="detailInfo?.scheduler" />
            <info-module class="w-[47%]" label="采样步数" :value="detailInfo?.steps" />
            <info-module class="w-[47%]" label="提示词引导系数（CFG Scale）" :value="detailInfo?.cfgScale" />
            <info-module class="w-[47%]" label="生成次数" :value="detailInfo?.nIter" />
            <info-module class="w-[47%]" label="每次数量" :value="detailInfo?.batchSize" />
            <info-module class="w-[47%]" label="随机种子" :value="detailInfo?.seed" />
            <template v-if="detail?.jobType === 1 && detailInfo?.enableHr">
              <info-module class="w-[47%]" label="放大倍率" :value="`${detailInfo?.hrScale}`" />
              <info-module class="w-[47%]" label="高清放大算法" :value="detailInfo?.hrUpscaler" />
              <info-module class="w-[47%]" label="重绘强度" :value="detailInfo?.denoisingStrength" />
            </template>

            <template v-if="detail?.jobType === 2">
              <info-module class="w-[47%]" label="缩放模式" :value="resizeMode" />
              <info-module class="w-[47%]" label="重绘强度" :value="detailInfo?.denoisingStrength" />
            </template>

            <template v-if="detailInfo?.mode === 2 || detailInfo?.mode === 3">
              <info-module class="w-[47%]" label="蒙版模糊度" :value="detailInfo?.maskBlur" />
              <info-module class="w-[47%]" label="蒙版蒙住的内容" :value="inpaintingFill" />
              <info-module class="w-[47%]" label="绘制区域" :value="inpaintFullRes" />
              <info-module class="w-[47%]" label="仅蒙版绘制参考半径(像素)" :value="detailInfo?.inpaintFullResPadding" />
            </template>

            <template v-if="detailInfo?.mode === 3">
              <info-module class="w-[47%]" label="蒙版透明度" :value="detailInfo?.maskAlpha" />
            </template>

            <template v-if="animateDiff">
              <info-module class="w-[47%]" label="动画模型" :value="animateDiff?.model" />
              <info-module class="w-[47%]" label="保存格式" :value="animateDiff?.format?.[0]" />
              <info-module class="w-[47%]" label="总帧数" :value="animateDiff?.videoLength" />
              <info-module class="w-[47%]" label="帧率" :value="animateDiff?.fps" />
              <info-module class="w-[47%]" label="显示循环数量" :value="animateDiff?.loopNumber" />
              <info-module class="w-[47%]" label="闭环方式" :value="animateDiff?.closedLoop" />
              <info-module class="w-[47%]" label="前后帧考虑范围" :value="animateDiff?.batchSize" />
              <info-module class="w-[47%]" label="步幅" :value="animateDiff?.stride" />
              <info-module class="w-[47%]" label="重叠" :value="animateDiff?.overlap" />
              <info-module class="w-[47%]" label="插帧" :value="animateDiff?.interp" />
              <info-module class="w-[47%]" label="中间帧数量" :value="animateDiff?.interpX" />
            </template>
          </template>
        </div>
        <div class="info-footer">
          <a-button type="primary" :loading="loading" @click="handleRecommend"> 推荐展示 </a-button>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
  import { message } from 'ant-design-vue'
  import { computed, ref } from 'vue'
  import { useRequest } from 'vue-request'

  import { studentDrawingManageApi } from '@/services/index'

  import { drawRegionOptions, maskFillOptions, zoomModeOptions } from '../../options/index'
  import InfoModule from '../InfoModule.vue'
  import { ImgRes, OverrideSettings } from './types'

  const visible = ref(false)

  const detailInfo = ref<any>({
    imgPath: ''
  })

  const detail = ref<ImgRes>()

  const modelList = ref<OverrideSettings[]>([])

  const { runAsync: runGetImgDetail } = useRequest<ResponseData<ImgRes>>(studentDrawingManageApi.getDetail, {
    onSuccess: res => {
      detail.value = res.data

      detailInfo.value = res.data?.sdGenerateDataVO || res.data?.mjgenerateDataVO || {}

      // 给模型列表赋值
      if (!detail.value.sdGenerateDataVO) return []
      const sdGenerateDataVO = detail.value.sdGenerateDataVO
      modelList.value = []
      // 基础模型
      if (sdGenerateDataVO?.overrideSettings) {
        modelList.value.push(sdGenerateDataVO.overrideSettings)
      }
      // 普通模型 embedding模型
      if (sdGenerateDataVO?.models) {
        modelList.value.push(...sdGenerateDataVO.models)
      }
    }
  })

  const resizeMode = computed(() => {
    return zoomModeOptions.find(item => item.value === detailInfo.value?.resizeMode)?.label
  })

  // const inpaintMaskInvert = computed(() => {
  //   return maskModeOptions.find(item => item.value === detailInfo.value?.inpaintMaskInvert)?.label
  // })

  const inpaintingFill = computed(() => {
    return maskFillOptions.find(item => item.value === detailInfo.value?.inpaintingFill)?.label
  })

  const inpaintFullRes = computed(() => {
    return drawRegionOptions.find(item => item.value === detailInfo.value?.inpaintFullRes)?.label
  })

  const animateDiff = computed(() => {
    return detailInfo.value?.alwaysonScripts?.animateDiff?.args?.[0]
  })

  const getImgDetail = (id: string) => {
    runGetImgDetail({ idType: 3, imgFlag: true }, { urlParams: { id } })
  }

  const open = (id: string) => {
    visible.value = true
    getImgDetail(id)
  }

  const close = () => {
    visible.value = false
  }

  const reset = () => {
    visible.value = false
  }

  const { loading, runAsync: runRecommend } = useRequest(studentDrawingManageApi.getDetail)
  const handleRecommend = async () => {
    await runRecommend()
    message.success('操作成功')
  }

  defineExpose({
    open,
    close,
    reset
  })
</script>

<style lang="less" scoped>
  .model-body {
    display: flex;
    align-items: center;
    gap: 0 6px;
    width: 100%;
    height: 800px;

    .image-wrap {
      padding: 6px;
      width: 988px;
      height: 788px;

      .big-img-wrap {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 100%;
        background: #f2f2f5;
        border: 1px #c4c4c7;
        border-radius: 4px;
        backdrop-filter: blur(10px);

        .under-bg-img {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 1;
          width: 100%;
          height: 100%;
          background: lightgray 50% / cover no-repeat;
          filter: blur(35px);
        }

        .big-img {
          position: relative;
          object-fit: contain;
          z-index: 5;
          width: 100%;
          height: 100%;
        }
      }
    }

    .info-wrap {
      display: flex;
      height: 100%;
      min-height: 0;
      flex: 1;
      border-left: 1px solid #f5f5f5;
      flex-direction: column;

      .title-wrap {
        padding: 0 20px;
        width: 100%;
        height: 46px;
        font-size: 14px;
        color: rgba(16, 16, 20, 0.95);
        font-weight: 700;
        line-height: 46px;
        border-bottom: 1px solid #f5f5f5;
      }

      .info-body {
        display: flex;
        justify-content: space-between;
        overflow-y: auto;
        padding: 20px;
        background: rgba(255, 255, 255, 1);
        flex-wrap: wrap;
        gap: 20px;
      }

      .info-footer {
        padding: 20px 24px;
        margin-top: auto;
        text-align: end;
      }
    }
  }
</style>
